import React, { Component } from 'react'
import {connect} from 'react-redux'
import { ListItem, ListInfo, LoadMore } from '../style';
import {getMoreList} from '../store/actionCreator'
import { Link } from 'react-router-dom'

 class List extends Component {
    render() {
        const {list, getMoreLis, page} = this.props
        return (
            <div>
            {
                list.map((item) => {
                    return (
                        <Link  key={item.get('id')} to={"/detail/"+item.get('id')}>
                            <ListItem>
                                <img className="pic" src={item.get('imgUrl')} alt='' />
                                <ListInfo>
                                    <h3 className="title">{item.get('title')}</h3>
                                    <p className="desc">{item.get('desc')}</p>
                                </ListInfo>
                            </ListItem>
                        </Link>
                    )
                })
            }


                <LoadMore onClick={()=>{getMoreLis(page+1)} }>加载更多</LoadMore>
            </div>
        )
    }
}
const stateToProps = (state) => 
     ({
        list: state.home.get( 'articalList'),
        page: state.home.get('articalPage')
    })

const dispatchToProps = (dispatch) => ({
    getMoreLis(page) {
        dispatch(getMoreList(page))
    }
})
export default connect(stateToProps, dispatchToProps)(List)
